<template>
    <div style="display: flex;align-items: center;justify-content: center;overflow: auto;width: 100%;height: 100%;;">
        <el-card style="width: 800px;height: 650px;">
            <el-table :data="shopping_cart_arr" style="width: 100%;height: 500px;"  @selection-change="handleSelectionChange">
                <el-table-column fixed type="selection" label="全选" width="55" align="center" />
                <el-table-column fixed label="菜品" width="150px" align="center">
                    <template #default="scope">
                        <el-avatar :src="BASE_URL+scope.row.imgUrl" :size=75></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column property="dishName" label="名称" width="120" align="center"/>
                <el-table-column property="number" label="数量/份" width="100" align="center"/>
                <el-table-column property="price" label="单价/元" width="120" align="center"/>
                <el-table-column property="totalPrice" label="单项总价/元" width="120" align="center"/>
                <el-table-column fixed="right" label="操作" width="90px" align="center">
                    <template #default="scope">
                        <el-button @click="remove_from_cart(scope.row.id)" type="warning" link style="cursor: pointer">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;position:relative;">
                <el-button v-if="mutipleSelection.length!==0" @click="handlerMuchDel" type="warning" style="margin-top: 30px">批量删除</el-button>
                <div class="statistic-card">
                    <el-statistic :value="'￥：'+total_amount">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                您当前所选菜品总额
                                <el-tooltip
                                    effect="dark"
                                    content="单位：RMB/元"
                                    placement="top"
                                >
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                </div>
                <el-button v-if="shopping_cart_arr.length!==0" @click="confirmOrder" style="position: absolute;right: 60px;margin-top: 40px;cursor: pointer;color: #42b983" link>确认下单</el-button>
            </div>
        </el-card>
    </div>



</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import store from "@/store";
import router from "@/router";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";


//用户
const user = ref(getUser())
//分店id
const branchId = user.value.branchId;
//购物车数组
const shopping_cart_arr = computed(() => store.state.global_shopping_cart_arr)//store改变，随之改变
//总金额
const total_amount = ref(0)
//查询购物车记录
const select_cart = ()=>{
    let branchId = store.state.global_branch_Id
    let userId = user.value.id
    axios.get(BASE_URL+'/v1/cart/select?branchId='+branchId+'&userId='+userId)
        .then((response)=>{
            if(response.data.code===2000){
                store.state.global_shopping_cart_arr=response.data.data
                let totalAmount=0
                for(let i=0;i<response.data.data.length;i++){
                    totalAmount+=response.data.data[i].totalPrice
                }
                total_amount.value=totalAmount.toFixed(2)
            }
        })
}
//删除购物车中一项内容
const remove_from_cart = (id)=>{
    axios.post(BASE_URL+'/v1/cart/deleteById/'+id)
        .then((response)=>{
            if(response.data.code===2000){
                ElMessage.success('移除成功')
                select_cart()
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}
//批量删除所选内容
const remove_choose_from_cart = ()=>{
    let data = qs.stringify(del_cart_data.value)
    axios.post(BASE_URL+'/v1/cart/deleteByIds',data)
        .then((response)=>{
            if(response.data.code===2000){
                ElMessage.success('移除成功')
                select_cart()
                mutipleSelection.value=[]
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}


// 获取要删除的多条记录
const mutipleSelection= ref([]) //定义空数组，临时存放数据
const del_cart_data = ref({ids:[]}) //批量删除购物车要提交的信息
const handleSelectionChange = (val)=>{
    mutipleSelection.value = val
}
const handlerMuchDel = ()=>{
    mutipleSelection.value.forEach(row=>{
        del_cart_data.value.ids.push(row.id)
        //const index = shopping_cart_arr.value.indexOf(row)//indexOf获取表里的下标
        //handlerDel(index,1)
    })
    remove_choose_from_cart()
}
//删除单个
/*const handlerDel = (index)=> {
    shopping_cart_arr.value.splice(index, 1)
}*/

//确认下单
const confirmOrder = ()=>{
    let confirm_info = {userId:user.value.id,branchId:branchId.value,id:'',total:total_amount.value}
    confirm_info.id=store.state.global_current_orderId
    console.log('confirm_info>>>>>>>>>>>>')
    console.log(confirm_info)
    let data = qs.stringify(confirm_info)
    axios.post(BASE_URL+'/v1/orders/confirmOrderEmp',data)
        .then((response)=>{
            if(response.data.code===2000){
                ElMessage.success('下单成功');
                //修改餐桌卡片显示
                store.state.emp_is_show_table_card=true
              // 更新订单的状态为完成订单
              let data=qs.stringify({id:store.state.global_current_orderId,diningStatus:'2'});
              axios.post(BASE_URL+'/v1/orders/confirmOrderEmp',data)
                .then((response)=>{
                  if(response.data.code===2000){
                    // 刷新订单列表
                    store.state.global_refresh_order_list=true
                  }else{
                    ElMessage.error(response.data.msg)
                  }
                })
                // 清空监听订单的数据 订单id
                store.state.global_current_orderId=''
                // 重置选择的餐桌
                store.state.global_my_table_info.id='';
                store.state.global_my_table_info.name='';



                select_cart()
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}

const back_login=()=>{
  router.push('/login')
}

onMounted(()=>{
    if(branchId.value===0){
        ElMessage.warning('请重新登录')
        setTimeout(back_login,3000)
    }else{
        select_cart()
    }
})



</script>

<style scoped>
.statistic-card {
    position: absolute;
    left: 330px;
    height: 100%;
    padding: 10px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);

}

</style>